<template>
	<li>
		<a :disabled="data.disabled" :class="classes">
			{{ data.label }}
			<icon v-if="showArrow" class="fa-angle-right pull-right m-t-5"></icon>
			<icon v-if="showLoading" class="fa-circle-o-notch revolve pull-right m-t-5"></icon>
		</a>
	</li>
</template>

<script>
	import Icon from '../widget/Icon.vue';
	export default {
		name: 'CascadeItem',
		props: {
			data: {type: Array | Object},
			setVal: {type: Object}
		},
		components: {
			Icon
		},
		computed: {
			classes () {
				return {
					active: this.setVal.value === this.data.value
				};
			},
			showArrow () {
				return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading);
			},
			showLoading () {
				return 'loading' in this.data && this.data.loading;
			}
		}
	};
</script>
